"use strict";
const common_vendor = require("../../common/vendor.js");
const composables_useGlobalToast = require("../../composables/useGlobalToast.js");
const __unplugin_components_3 = () => "../../node-modules/wot-design-uni/components/wd-cell-group/wd-cell-group.js";
const __unplugin_components_2 = () => "../../node-modules/wot-design-uni/components/wd-cell/wd-cell.js";
const __unplugin_components_1 = () => "../../node-modules/wot-design-uni/components/wd-button/wd-button.js";
const __unplugin_components_0 = () => "../../components/DemoBlock.js";
if (!Array) {
  const _component_demo_block = __unplugin_components_0;
  const _component_wd_button = __unplugin_components_1;
  const _component_wd_cell = __unplugin_components_2;
  const _component_wd_cell_group = __unplugin_components_3;
  const _component_layout_default_uni = common_vendor.resolveComponent("layout-default-uni");
  (_component_demo_block + _component_wd_button + _component_wd_cell + _component_wd_cell_group + _component_layout_default_uni)();
}
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
  __name: "index",
  setup(__props) {
    const { success: showSuccess } = composables_useGlobalToast.useGlobalToast();
    const animationState = common_vendor.ref(false);
    const unocssFeatures = common_vendor.ref([
      {
        icon: "⚡",
        title: "即时按需",
        desc: "只生成你使用的CSS",
        example: "text-red-500 bg-blue-100"
      },
      {
        icon: "🎨",
        title: "完全可定制",
        desc: "灵活的配置和预设",
        example: "custom-color-brand"
      },
      {
        icon: "🔧",
        title: "预设丰富",
        desc: "内置Tailwind、Windi等预设",
        example: "@unocss/preset-wind"
      },
      {
        icon: "🚀",
        title: "性能优异",
        desc: "极快的构建速度",
        example: "< 200ms"
      }
    ]);
    const colorCategories = common_vendor.ref([
      {
        name: "灰色系",
        colors: [
          { name: "gray-50", class: "bg-gray-50", value: "#f9fafb" },
          { name: "gray-100", class: "bg-gray-100", value: "#f3f4f6" },
          { name: "gray-200", class: "bg-gray-200", value: "#e5e7eb" },
          { name: "gray-300", class: "bg-gray-300", value: "#d1d5db" },
          { name: "gray-400", class: "bg-gray-400", value: "#9ca3af" },
          { name: "gray-500", class: "bg-gray-500", value: "#6b7280" }
        ]
      },
      {
        name: "主题色",
        colors: [
          { name: "blue-500", class: "bg-blue-500", value: "#3b82f6" },
          { name: "green-500", class: "bg-green-500", value: "#10b981" },
          { name: "red-500", class: "bg-red-500", value: "#ef4444" },
          { name: "yellow-500", class: "bg-yellow-500", value: "#f59e0b" },
          { name: "purple-500", class: "bg-purple-500", value: "#8b5cf6" },
          { name: "pink-500", class: "bg-pink-500", value: "#ec4899" }
        ]
      }
    ]);
    const layoutExamples = common_vendor.ref([
      {
        title: "Flex 居中",
        code: "flex items-center justify-center",
        class: "flex items-center justify-center h-20 bg-blue-100 rounded-2 text-blue-800"
      },
      {
        title: "Grid 网格",
        code: "grid grid-cols-3 gap-4",
        class: "grid grid-cols-3 gap-2"
      },
      {
        title: "Space Between",
        code: "flex justify-between items-center",
        class: "flex justify-between items-center h-16 bg-green-100 rounded-2 px-4 text-green-800"
      }
    ]);
    const spacingExamples = common_vendor.ref([
      { name: "p-1", value: "4px", class: "p-1 bg-red-100 inline-block m-1 rounded" },
      { name: "p-2", value: "8px", class: "p-2 bg-blue-100 inline-block m-1 rounded" },
      { name: "p-4", value: "16px", class: "p-4 bg-green-100 inline-block m-1 rounded" },
      { name: "p-6", value: "24px", class: "p-6 bg-yellow-100 inline-block m-1 rounded" },
      { name: "p-8", value: "32px", class: "p-8 bg-purple-100 inline-block m-1 rounded" }
    ]);
    const fontExamples = common_vendor.ref([
      { name: "text-xs", size: "12px", class: "text-xs" },
      { name: "text-sm", size: "14px", class: "text-sm" },
      { name: "text-base", size: "16px", class: "text-base" },
      { name: "text-lg", size: "18px", class: "text-lg" },
      { name: "text-xl", size: "20px", class: "text-xl" },
      { name: "text-2xl", size: "24px", class: "text-2xl" },
      { name: "text-3xl", size: "30px", class: "text-3xl" }
    ]);
    const effectExamples = common_vendor.ref([
      { name: "shadow-sm", class: "shadow-sm bg-white p-4 rounded-2 mb-3" },
      { name: "shadow", class: "shadow bg-white p-4 rounded-2 mb-3" },
      { name: "shadow-md", class: "shadow-md bg-white p-4 rounded-2 mb-3" },
      { name: "shadow-lg", class: "shadow-lg bg-white p-4 rounded-2 mb-3" },
      { name: "shadow-xl", class: "shadow-xl bg-white p-4 rounded-2 mb-3" }
    ]);
    function toggleAnimation() {
      animationState.value = !animationState.value;
      showSuccess({ msg: `动画状态: ${animationState.value ? "开启" : "关闭"}` });
    }
    function copyCode(code) {
      common_vendor.index.setClipboardData({
        data: code,
        showToast: false,
        success: () => {
          common_vendor.index.hideToast();
          showSuccess({ msg: "代码已复制到剪贴板" });
        }
      });
    }
    function handleNavigate(url) {
      common_vendor.index.setClipboardData({
        data: url,
        showToast: false,
        success: () => {
          common_vendor.index.hideToast();
          showSuccess({ msg: `${url} 已复制到剪贴板` });
        }
      });
    }
    return (_ctx, _cache) => {
      return {
        a: common_vendor.f(common_vendor.unref(unocssFeatures), (feature, k0, i0) => {
          return {
            a: common_vendor.t(feature.icon),
            b: common_vendor.t(feature.title),
            c: common_vendor.t(feature.desc),
            d: common_vendor.t(feature.example),
            e: feature.title
          };
        }),
        b: common_vendor.p({
          title: "UnoCSS 核心特性",
          transparent: true
        }),
        c: common_vendor.f(common_vendor.unref(colorCategories), (category, k0, i0) => {
          return {
            a: common_vendor.t(category.name),
            b: common_vendor.f(category.colors, (color, k1, i1) => {
              return {
                a: common_vendor.n(color.class),
                b: common_vendor.t(color.name),
                c: common_vendor.t(color.value),
                d: color.name,
                e: common_vendor.o(($event) => copyCode(color.class), color.name)
              };
            }),
            c: category.name
          };
        }),
        d: common_vendor.p({
          title: "颜色系统",
          transparent: true
        }),
        e: common_vendor.f(common_vendor.unref(layoutExamples), (example, k0, i0) => {
          return common_vendor.e({
            a: common_vendor.t(example.title),
            b: common_vendor.t(example.code),
            c: common_vendor.o(($event) => copyCode(example.code), example.title),
            d: example.title === "Flex 居中"
          }, example.title === "Flex 居中" ? {
            e: common_vendor.n(example.class)
          } : example.title === "Grid 网格" ? {
            g: common_vendor.f(6, (n, k1, i1) => {
              return {
                a: common_vendor.t(n),
                b: n
              };
            }),
            h: common_vendor.n(example.class)
          } : {
            i: common_vendor.n(example.class)
          }, {
            f: example.title === "Grid 网格",
            j: example.title
          });
        }),
        f: common_vendor.p({
          title: "布局系统",
          transparent: true
        }),
        g: common_vendor.f(common_vendor.unref(spacingExamples), (spacing, k0, i0) => {
          return {
            a: common_vendor.t(spacing.name),
            b: spacing.name,
            c: common_vendor.n(spacing.class),
            d: common_vendor.o(($event) => copyCode(spacing.name), spacing.name)
          };
        }),
        h: common_vendor.p({
          title: "间距系统",
          transparent: true
        }),
        i: common_vendor.f(common_vendor.unref(fontExamples), (font, k0, i0) => {
          return {
            a: common_vendor.n(font.class),
            b: common_vendor.t(font.size),
            c: common_vendor.t(font.name),
            d: font.name,
            e: common_vendor.o(($event) => copyCode(font.name), font.name)
          };
        }),
        j: common_vendor.p({
          title: "字体系统",
          transparent: true
        }),
        k: common_vendor.f(common_vendor.unref(effectExamples), (effect, k0, i0) => {
          return {
            a: common_vendor.t(effect.name),
            b: effect.name,
            c: common_vendor.n(effect.class),
            d: common_vendor.o(($event) => copyCode(effect.name), effect.name)
          };
        }),
        l: common_vendor.p({
          title: "阴影效果",
          transparent: true
        }),
        m: common_vendor.o(($event) => copyCode("hover_a_bg-blue-200 hover_a_scale-105 transition-all duration-300")),
        n: common_vendor.o(toggleAnimation),
        o: common_vendor.p({
          type: "primary",
          block: true
        }),
        p: common_vendor.n(common_vendor.unref(animationState) ? "bg-gradient-to-r from-purple-500 to-pink-500 text-white transform rotate-12 scale-110 shadow-lg" : "bg-gray-100 text-gray-800 transform rotate-0 scale-100 shadow-sm dark_a_bg-_a_var_a_--wot-dark-background3_a__a_ dark_a_text-_a_var_a_--wot-dark-color_a__a_"),
        q: common_vendor.o(($event) => copyCode("transition-all duration-500 ease-in-out transform rotate-12 scale-110")),
        r: common_vendor.p({
          title: "交互效果",
          transparent: true
        }),
        s: common_vendor.f(8, (n, k0, i0) => {
          return {
            a: common_vendor.t(n),
            b: n
          };
        }),
        t: common_vendor.o(($event) => copyCode("grid-cols-1 sm_a_grid-cols-2 md_a_grid-cols-3 lg_a_grid-cols-4")),
        v: common_vendor.p({
          title: "响应式设计",
          transparent: true
        }),
        w: common_vendor.o(($event) => copyCode("block inline flex hidden")),
        x: common_vendor.o(($event) => copyCode("absolute relative top-2 left-2 right-2 bottom-2")),
        y: common_vendor.p({
          title: "实用工具类",
          transparent: true
        }),
        z: common_vendor.o(($event) => handleNavigate("https://unocss.dev/")),
        A: common_vendor.p({
          title: "📚 UnoCSS 官方文档",
          value: "unocss.dev",
          ["is-link"]: true
        }),
        B: common_vendor.o(($event) => handleNavigate("https://github.com/unocss/unocss")),
        C: common_vendor.p({
          title: "🐙 GitHub 仓库",
          value: "unocss/unocss",
          ["is-link"]: true
        }),
        D: common_vendor.o(($event) => handleNavigate("https://unocss.dev/play/")),
        E: common_vendor.p({
          title: "🎮 在线演练场",
          value: "在线体验",
          ["is-link"]: true
        }),
        F: common_vendor.o(($event) => handleNavigate("https://tailwindcss.com/docs")),
        G: common_vendor.p({
          title: "📖 Tailwind CSS",
          value: "参考文档",
          ["is-link"]: true
        }),
        H: common_vendor.o(($event) => handleNavigate("https://unocss.dev/guide/")),
        I: common_vendor.p({
          title: "💡 最佳实践",
          value: "使用指南",
          ["is-link"]: true
        }),
        J: common_vendor.p({
          border: true,
          ["custom-class"]: "rounded-2_a_ overflow-hidden"
        }),
        K: common_vendor.p({
          title: "相关链接",
          transparent: true
        })
      };
    };
  }
});
wx.createPage(_sfc_main);
